<!--
 * @Author: bankeyu-dell 573569790@qq.com
 * @Date: 2022-11-05 09:05:35
 * @LastEditors: bankeyu-dell 573569790@qq.com
 * @LastEditTime: 2022-11-05 09:05:52
 * @FilePath: \web-vue3\src\views\demo\vue.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div> </div>
</template>

<script lang="ts">
  import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
  interface DataProps {}
  export default {
    name: '',
    setup() {
      console.log('1-开始创建组件-setup');
      const data: DataProps = reactive({});
      onBeforeMount(() => {
        console.log('2.组件挂载页面之前执行----onBeforeMount');
      });
      onMounted(() => {
        console.log('3.-组件挂载到页面之后执行-------onMounted');
      });
      const refData = toRefs(data);
      return {
        ...refData,
      };
    },
  };
</script>

<style scoped></style>
